<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lesson 37</title>
    <style>
        div {
            font-size: 66px;
        }
    </style>
    <script src="https://unpkg.com/vue@next"></script>

</head>
<body>
<div id="root"></div>
</body>
<script>
    // toRef
    const app = Vue.createApp({
        setup(props, context) {
            const {ref,reactive} = Vue;
            const inputVue = ref('123');
            const list = reactive([]);
           /* function handleInputValueChange(e){
                inputVue.value = e.target.value;
            };*/
            const handleInputValueChange = (e)=>{
                inputVue.value = e.target.value;
            };
            const handleSubmit = (e)=>{
               list.push(inputVue.value);
            };
            return {
                list,
                inputVue,
                handleInputValueChange,
                handleSubmit,
            }
        },

        // created 实例被完全初始化之前
        template: `
          <div>
            <div>
              <input type="text" :value="inputVue" @input="handleInputValueChange"/>
              <button @click="handleSubmit">添加</button>
            </div>
            <div>{{inputVue}}</div>
            <ul>
              <li v-for="(item,index) in list" :key="index">{{item}}</li>
            </ul>
          </div>
        `
    });



    const vm = app.mount('#root');
</script>
</html>